<template>
  <div class="page-container">
    <!-- 顶部栏 -->
    <div class="top-bar">
      <span class="current-time">12:00</span>
      <div class="sort-controls">
        <button class="sort-btn">按时间排序</button>
        <input type="date" class="date-filter" value="2023-04-01" />
      </div>
    </div>

    <!-- 图片列表 -->
    <div class="record-list">
      <div class="record-card" v-for="(item, index) in records" :key="index">
        <img :src="item.image" class="record-img" alt="图片" />
        <div class="record-info">
          <p class="record-date">拍摄日期: {{ item.date }}</p>
          <p class="record-result" :class="{ abnormal: item.result === '异常' }">
            检测结果: {{ item.result }}
          </p>
          <button class="detail-btn">查看详情</button>
        </div>
      </div>
    </div>

    <!-- 分页按钮 -->
    <div class="pagination">
      <button class="page-btn">上一页</button>
      <button class="page-btn">下一页</button>
    </div>
  </div>
</template>

<script  setup>
import { ref } from 'vue';

const records = ref([
  {
    image: 'https://picsum.photos/200/150?random=1',
    date: '2023-04-01',
    result: '正常'
  },
  {
    image: 'https://picsum.photos/200/150?random=2',
    date: '2023-03-15',
    result: '异常'
  },
  {
    image: 'https://picsum.photos/200/150?random=3',
    date: '2023-02-10',
    result: '正常'
  },
  {
    image: 'https://picsum.photos/200/150?random=4',
    date: '2023-01-25',
    result: '正常'
  },
  {
    image: 'https://picsum.photos/200/150?random=5',
    date: '2022-12-30',
    result: '异常'
  },
  {
    image: 'https://picsum.photos/200/150?random=6',
    date: '2022-11-15',
    result: '正常'
  }
]);
</script>

<style scoped >
@import url("../../common/css/historical_records.css");
</style>